<template>
    <div>
        <div class="show-pc" v-if="isPc">
            <!-- 加载状态 -->
            <a-spin :spinning="loading" size="large" class="loading-spinner" />
            <div v-show="!loading">
                <div class="Pinned">
                    <div class="content">
                        <div class="rightbox">
                            <div v-for="(item, index) in imgList" :key="item.id"
                                style="position: relative;" class="image-item" @click="handleTodetails(item)">
                                <sshbImage :width="item.isHen? IMAGE_SIZE.LARGE: IMAGE_SIZE.SMALL" :height="IMAGE_SIZE.HEIGHT" :src="item.imageUrl"
                                    class="cross-img" />
                                <div class="rightTopUp" :class="{ 'active-top': item.isActive }" >
                                    置顶
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding-bottom: 0.52vw;">
                    <ImageCard />
                </div>
            </div>
        </div>
        <!-- 移动端 -->
        <template v-if="!isPc">
            <div class="show-wap">
                <!-- 加载状态 -->
                <a-spin :spinning="loading" size="large" class="loading-spinner" />
                <div v-show="!loading">
                    <div class="Pinned-wap">
                        <div class="content-wap">

                            <div class="rightbox-container-wap">
                                <div class="rightbox-wap">
                                    <div v-for="item in imgList" class="slide-item-wap" @click="handleTodetailsWAP(item)">
                                        <sshbImage :width="item.isHen? IMAGE_SIZE.LARGE * 2: IMAGE_SIZE.SMALL * 2" :height="IMAGE_SIZE.HEIGHT * 2" :src="item.imageUrl"
                                            style="border-radius: 10px;">
                                        </sshbImage>
                                        <div class="rightTopUp-wap"> 
                                            置顶
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <ImageCard />
                    </div>
                </div>
            </div>
        </template>
  
    </div>



</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/swiper-bundle.css'
import 'swiper/css'
import 'swiper/css/autoplay'
import ImageCard from './ImageCard.vue'
import sshbImage from '@/sshbComponents/sshbImage/index.vue';
import { useHttp } from '@/api/http'

import { useRouter } from 'vue-router'
const router = useRouter()

const imgList = ref([])

const isPc = ref(true)
onMounted(() => {
    isPc.value = window.innerWidth > 800
})


// 尺寸配置
const IMAGE_SIZE = {
    LARGE: 892,
    SMALL: 292,
    HEIGHT: 490
}

const activeIndex = ref(0)

// 计算属性生成带尺寸的数据
const sizedImgList = computed(() => {
    
    
    return imgList.value.map((item, index) => ({
        ...item,
        width: index === activeIndex.value ? IMAGE_SIZE.LARGE : IMAGE_SIZE.SMALL,
        height: IMAGE_SIZE.HEIGHT,
        isActive: index === activeIndex.value,
        loadingShow:true,        
    }))
  
})



const handleHover = (index) => {
    activeIndex.value = index
}

// const handleTodetails = (item) => {
//     let imageUrls = item.imageUrl;
//     console.log(imageUrls);
    

//     window.open(`${BASEURLTZ}/details/${item.picId}?url=${btoa(item.imageUrl)}`, "_blank ")
  
// }

const handleTodetails = (item) => {
  // 安全的 Base64 编码（处理中文）
  const safeBtoa = (str) => {
    return btoa(unescape(encodeURIComponent(str))); // 编码步骤：中文→URI→二进制→Base64
  };

  // 对 Base64 结果再次 URI 编码，避免特殊字符
  const encodedUrl = encodeURIComponent(safeBtoa(item.imageUrl));

  // 拼接 URL 时参数名用 "url"（与解码时保持一致）
  const url = `${BASEURLTZ}/details/${item.picId}?url=${encodedUrl}`;
  window.open(url, '_blank');
};

const handleTodetailsWAP= (item)=>{
    router.push(`/details/${item.picId}`)
}
// 加载状态控制
const loading = ref(true)

// 模拟数据加载
onMounted(() => {

    

    setTimeout(() => {
        loading.value = false
    }, 1000) // 1.5秒后关闭加载状态
})

// 获取置顶图片数据
const getCount = () => {
    // useHttp.get('/web/index/picTopList').then((res) => {
    //     // 确保 res.result 是一个数组
    //     if (!Array.isArray(res.result)) {
    //         console.error("返回的数据不是数组");
    //         return;
    //     }

    //     // 遍历接口返回的结果，并更新 imgList 中对应的项
    //     imgList.value = res.result.map(item => {
    //         let imgurl = '';

    //         // 检查 imageList 是否存在且至少有一个元素
    //         if (Array.isArray(item.imageList) && item.imageList.length > 0) {
    //             // 获取第一个图片的 imgPath
    //             const imagePath = item.imageList[0].imgPath || '';
    //             imgurl = imagePath;
    //         } else {
    //             console.warn(`ID为 ${item.id} 的项目没有可用的图片路径`);
    //         }

    //         return {
    //             id: item.id,
    //             imgurl: imgurl
    //         };
    //     });
    // }).catch(error => {
    //     console.error("获取置顶图片列表失败:", error);
    // });
    useHttp.get('/system/setting/config/list', {
        formId: 1,
    }).then(res => {
        let arr = [{},{},{},{}]
        const obj = {
            config_index_top_up_1: 1,
            config_index_top_up_2: 2,
            config_index_top_up_3: 3,
            config_index_top_up_4: 4,
        }
        for(let i of res.result.records) {
            arr[obj[i.name]] = JSON.parse(i.value)
        }
        imgList.value = arr
    })
}
getCount()




</script>

<style lang="less" scoped>
.Pinned {
    width: 95.83333333333334vw;
    margin: 0 auto;
    margin-top: 2.08vw;




    .content {
        display: flex;
        justify-content: space-between;


        .rightbox {
            flex: 1;
            display: flex;
            gap: 0.5vw;
            overflow: hidden;

            .image-item {
                position: relative;
                flex-shrink: 0;
                cursor: pointer;
                transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

                &:hover .rightTopUp {
                    background: rgba(214, 0, 14, 0.8);
                }

                .cross-img {
                    width: 100%;
                    height: 100%;
                    border-radius: 0.52vw;
                    object-fit: cover;
                    display: block;
                }

                .rightTopUp {
                    width: 3.64vw;
                    height: 2.08vw;
                    text-align: center;
                    line-height: 2.08vw;
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.7);
                    border-radius: 0.2vw 0.52vw 0.2vw 0.41vw;
                    font-size: 0.93vw;
                    color: #fff;
                    z-index: 2;



                }

                .rightTopUp {
                    /* 原有样式 */
                    background: rgba(0, 0, 0, 0.7);
                }

                .rightTopUp.active-top,
                .image-item:hover .rightTopUp {
                    background: rgba(214, 0, 14, 0.8);
                }
            }


        }








    }


}

.Pinned-wap {
    width: 95%;
    margin: 0 auto;

    .content-wap {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        gap: 20px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; // iOS 平滑滚动

        /* 全平台隐藏滚动条方案 */
        scrollbar-width: none; // Firefox
        -ms-overflow-style: none; // IE/Edge

        &::-webkit-scrollbar {
            display: none; // Chrome/Safari/新版Edge
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }

        /* iOS 16+ 专项处理 */
        @supports (-webkit-touch-callout: none) {
            overflow: -moz-scrollbars-none; // 旧版Firefox备用
            // mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent); // 边缘渐变隐藏
        }

        .rightbox-container-wap {
            .rightbox-wap {
                display: flex;
                gap: 10px;
                white-space: nowrap;
                padding-bottom: 1px;


                .slide-item-wap {
                    position: relative;

                    .rightTopUp-wap {
                        width: 50px;
                        height: 30px;
                        text-align: center;
                        line-height: 30px;
                        position: absolute;
                        top: 0;
                        right: 0;
                        background: rgba(0, 0, 0, 0.7);
                        border-radius: 4px 8px 4px 4px;
                        font-size: 14px;
                        color: #fff;
                        z-index: 2;
                    }

                }
            }
        }
    }

}
</style>
